<template>
    <div>
        <div class="basetable-box">
        <!-- 过滤表单 -->
        <el-card  shadow="never">
            <el-row style="margin-top:0px;">
                <el-col>
                    <component
                    v-if="tableSetting.filetrOptions.length"
                    style="display:inline-block;"
                    v-for="item in tableSetting.filetrOptions"
                    :key="item.index"
                    :is="item.componentName"
                    :ref="item.ref"
                    :placeholder="item.placeholder"
                    :paramsName="item.paramsName"
                    @handleChange="handleChange"
                    ></component>

                    <el-button
                    type="primary"
                    v-if="tableSetting.tableHaederBtn"
                    @click="handleTabelHeaderAdd">
                        {{tableSetting.tableHaederBtn}}
                    </el-button>

                    <el-button
                    v-if="tableSetting.filetrOptions.length"
                    @click="handleSearch"
                    type="primary"
                    style="margin-bottom:10px;margin-top:10px;">
                        <i class="el-icon-search"></i> 搜索
                    </el-button>

                    <el-button
                    v-if="tableSetting.filetrOptions.length"
                    @click="handleRest"
                    type="primary"
                    style="margin-bottom:10px;margin-top:10px;">重置</el-button>

                    <el-button
                    type="danger"
                    style="margin-bottom:10px;margin-top:10px;"
                    v-show="deleteBtnShow"
                    @click="handleDeleteAll">批量删除</el-button>
                </el-col>
            </el-row>
        </el-card>
        <!-- 表格 -->
        <el-row style="margin-top:15px;">
            <el-col :span="24">
                <el-table
                :header-cell-style="{background:'#fff'}"
                :data="tableData"
                v-loading="tableLoading"
                @selection-change="handleAllChoose"
                @sort-change="handleSortChange"
                :size="tableSetting.size || 'mini'"
                style="width: 100%;">

                    <el-table-column
                        v-if="tableSetting.tabletype == 'selection'"
                        type="selection"
                        width="55">
                    </el-table-column>


                    <el-table-column
                        
                        :fixed="item.fixed || false"
                        :sortable="item.sortable || false"
                        v-for="item in tableSetting.options"
                        :key="item.index"
                        :prop="item.prop"
                        :align="item.align || 'center'"
                        :label="item.label"
                        :width="item.width"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div v-if="item.html" :class="item.color">
                                <i v-if="item.icon" :class="'iconfont' + ' '+ item.icon"></i>
                                <span
                                    v-html="item.html(scope.row)"
                                    @click="handleTableCilk(item.handleName,scope.row,scope.$index)"
                                    style="cursor:pointer"></span>
                            </div>
                            <div v-else-if="item.comp">
                                <component :is="item.comp" :data="scope.row"/>
                            </div>
                            <div v-else :class="item.color">
                                <i v-if="item.icon" :class="'iconfont' +' '+ item.icon"></i>
                                <span
                                    @click="handleTableCilk(item.handleName,scope.row,scope.$index)"
                                    style="cursor:pointer">{{scope.row[item.prop]}}</span>
                            </div>
                        </template>
                        
                        <!-- 多级表头合并列 -->
                        <el-table-column 
                        v-if="item.children && item.children.length" 
                        v-for="childItem in item.children"
                        :key="childItem.index"
                        :prop="childItem.prop"
                        :align="childItem.align || 'center'"
                        :label="childItem.label"
                        :width="childItem.width"
                        :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <div v-if="childItem.html" :class="childItem.color">
                                    <i v-if="childItem.icon" :class="'iconfont' + ' '+ childItem.icon"></i>
                                    <span
                                        v-html="childItem.html(scope.row)"
                                        @click="handleTableCilk(childItem.handleName,scope.row,scope.$index)"
                                        style="cursor:pointer"></span>
                                </div>
                                <div v-else-if="childItem.comp">
                                    <component :is="childItem.comp" :data="scope.row"/>
                                </div>
                                <div v-else :class="childItem.color">
                                    <i v-if="childItem.icon" :class="'iconfont' +' '+ childItem.icon"></i>
                                    <span
                                        @click="handleTableCilk(childItem.handleName,scope.row,scope.$index)"
                                        style="cursor:pointer">{{scope.row[childItem.prop]}}</span>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table-column>


                    </el-card>

                    <el-table-column label="操作" width="150" align="right" fixed="right">
                        <template slot-scope="scope">
                            <span  v-if="tableSetting.btns&&tableSetting.btns.length">
                                <el-button
                                v-for="el in tableSetting.btns"
                                :key="el.index"
                                :size="el.size || 'samll'"
                                :type="el.type || 'primary'"
                                @click="handleTable(el.handleName,scope.row,scope.$index)"
                                v-if="!el.show || (el.show&&el.show(scope.row))"
                                >
                                {{el.text}}
                                </el-button>
                            </span>
                            <span v-if="tableSetting.btnsIcon && tableSetting.btnsIcon.length">
                                <i
                                style="font-size:22px;margin:0 10px;cursor:pointer;"
                                v-for="el in tableSetting.btnsIcon"
                                :class="'iconfont' + ' ' + el.icon"
                                :key="el.index"
                                @click="handleTable(el.handleName,scope.row,scope.$index)"
                                 v-if="!el.show || (el.show&&el.show(scope.row))"
                                :title="el.text"></i>
                            </span>
                        </template>

                    </el-table-column>
                </el-table>
            </el-col>
            </el-card>
        </el-row>
        </div>

        <!-- 分页 -->
        <el-row>
            <el-col style="margin-top:50px;">
                <el-pagination
                    style="float:right"
                    @current-change="handleChangePage"
                    background layout="prev, pager, next"
                    :page-count="pageTotal">
                </el-pagination>
            </el-col>
        </el-row>

    </div>
</template>



<script>
export default {
  props: ["tableSetting"],
  data() {
    return {
      tableLoading: false, //表格laoding
      deleteBtnShow: false, //表格批量删除按钮
      tableData: [], //表格数据
      tableParams: {
        pageNum: 1,
        pageSzie: 10,
      }, //表格请求参数
      manyData: [], //多选的数据
      pageTotal: 0, //页面数据总数
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    //表格请求数据
    initData() {
      this.$emit("initDataParams", this.tableParams);
      this.tableData = [
        {
          lastActivityTime: '点击事件-字体颜色-宽度设置',
          locationId: 3,
          locationValue: '普通文字显示',
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 0,
          time: "2021-07-02 15:33:11",
        },
        {
          lastActivityTime: 1,
          locationId: 1,
          locationValue: 3,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 1,
          time: "2021-07-01 15:33:11",
        },
        {
          lastActivityTime: 1,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 15:33:11",
        },
        {
          lastActivityTime: 12,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 16:33:11",
        },
        {
          lastActivityTime: 12,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 16:33:11",
        },
        {
          lastActivityTime: 12,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 16:33:11",
        },
        {
          lastActivityTime: 12,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 16:33:11",
        },
        {
          lastActivityTime: 12,
          locationId: 2,
          locationValue: 1,
          online: 1,
          termCode: 324,
          termId: 12,
          termName: 123,
          online: 2,
          time: "2021-06-06 16:33:11",
        },
      ];
      console.log(this.tableParams, "表格请求参数");
      //这里写接口请求表格数据
      // this.tableLoading = true
      //如果表格配置存在请求函数
      // if (this.tableSetting.tabelApiFn) {
      //   this.tableLoading = true

      //   this.tableSetting.tabelApiFn(this.tableParams).then(res => {
      //     this.tableLoading = false
      //     // console.log(res)
      //     // if(res.code == 0){
      //     // this.tableData = res.data.data
      //     // this.pageTotal = res.data.totalPage //总页数
      //     // }
      //     console.log(res.data.termList)
      //     this.tableData = res.data.termList
      //   })
      // }
    },
    //多选表格事件
    handleAllChoose(val) {
      this.manyData = val;
      if (val.length) {
        this.deleteBtnShow = true;
      } else {
        this.deleteBtnShow = false;
      }
    },
    //多选删除
    handleDeleteAll() {
      this.$emit("handleCommon", "handleTabelChoose", this.manyData);
    },
    //表格头部按钮新增事件
    handleTabelHeaderAdd() {
      this.$emit("handleTabelHeaderAdd");
    },
    //表格事件
    handleTable(name, row, idx) {
      this.$emit("handleCommon", name, row, idx);
    },
    //排序事件
    handleSortChange(a) {
      console.log(a);
    },
    //分页
    handleChangePage(idx) {
      this.tableParams.pageNum = idx;
      this.initData();
    },
    //条件查询
    handleSearch() {
      this.tableParams.pageNum = 1;
      this.initData();
    },
    //重置按按钮
    handleRest() {
      //清空所有过滤表单
      for (let i in this.$refs) {
        if (this.$refs[i] && this.$refs[i][0] && this.$refs[i][0].rest) {
          this.$refs[i][0].rest();
        }
      }
      this.initData();
    },
    //表格某一项点击事件
    handleTableCilk(name, row, idx) {
      this.$emit("handleCommon", name, row, idx);
    },
    //监听表单变化  表格参数
    handleChange(value, params) {
      this.tableParams[params] = value;
    },
  },
};
</script>



<style scoped lang="scss">
@import "src/styles/variables.scss";
.red {
  color: red;
}
.green {
  color: green;
}
.bule {
  color: blue;
}
.el-table {
  border: none;
  border-radius: 5px;
}
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  background-color: #e5e2e2;
  height: 10px;
  border-radius: 5px;
}
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #cacac9;
  height: 10px;
  border-radius: 5px;
}
</style>
